<template>
  <div class="acticle-com">
    <div class="listdetail"> 
      <div class="detail-title">
        <h2>{{articleList.title}}</h2>
        <div>
          <span>时间：{{articleList.createTime | formatTime("yyyy-MM-dd hh:mm")}}</span>
         <!--  <span>来源：未知 </span>
          <span>作者：龙泉驿人大办公室</span> -->
          <span>点击：{{articleList.view}}次</span>
        </div>
      </div>
      <div class="detail-content" v-html="articleList.content">
        
      </div>
<!--       <p v-if="content.prevId" @click="toOtherArticle(content.prevId)">上一篇：{{content.prevName}}</p>
      <p v-if="content.nextId" @click="toOtherArticle(content.nextId)">下一篇：{{content.nextName}}</p> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: {}
    };
  },
  mounted() {
    this.articleList = this.$route.query.articleList;
    console.log(this.articleList);
  },
  watch: {
    $route(to, from) {
      if (
        to.path.indexOf("articleCom") != -1 &&
        from.path.indexOf("articleCom") != -1
      ) {
        this.id = to.params.id;
        this.getArticle();
      }
    }
  },
  methods: {
    getArticle() {
      let urlParams = {
        articleId: this.id
      };
      this.$api
        .getArticledetail(urlParams)
        .then(res => {
          this.content = res.data.content;
        })
        .catch(error => {
          console.log(error);
        });
    },
    toOtherArticle(id) {
      console.log(this.$route);
      let paths = this.$route.path.split("/");
      this.$router.push({
        path: "/" + paths[1] + "/" + paths[2] + "/" + id
      });
    }
  },
  components: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
@import "./index.less";
</style>
